<template>
  <home-block
    class="warrant"
    title="博金盾 - 火博网娱乐顶级第三方担保"
  >
    <div slot="left">
      <div class="btn-wrap">
        <router-link to="/report">
          <img :src="`${$baseImgUrl}home/report.png`"/>
        </router-link>
        <router-link to="/editGuarantee">
          <img :src="`${$baseImgUrl}home/guarantee.png`"/>
        </router-link>
      </div>
      <div
        class="plat"
        :style="{background: `#f4f3f3 url('${$baseImgUrl}home/plat_bg.png') no-repeat`}"
      >
        <p>
          已收入
          <router-link class="link" to="/company">{{plat.all}}</router-link>
          家
        </p>
        <p>
          已安全担保
          <router-link class="link" to="/guarantee">{{plat.is_guarantee}}</router-link>
          家
        </p>
        <p>
          已安全认证
          <router-link class="link" to="/guarantee">{{plat.certification}}</router-link>
          家
        </p>
      </div>
      <div
        class="record"
        :style="{background: `url('${$baseImgUrl}home/r_bg.png') no-repeat 0 center`}"
      >交易记录</div>
      <div class="list-wrap">
        <ul class="list" :style="{transform: `translateY(${distance}px)`}">
          <li
            v-for="(record, index) in recordList"
            :key="index"
            :style="{background: `url('${$baseImgUrl}home/index_15.png') no-repeat`}"
          >
            {{record.number}} 充值 <span>{{record.money}}</span> 元
          </li>
        </ul>
      </div>
    </div>
    <div slot="right">
      <div class="warrant-list">
        <el-row
          v-for="(item, index) in warrant"
          :key="index"
          :gutter="20"
          :style="{marginTop: index === 0 ? '' : '10px'}"
        >
          <el-col
            v-for="(sub, index) in item"
            :key="index"
            :span="6"
            class="warrant-item"
          >
            <img class="big-img" :src="sub.logo_img"/>
            <div class="text-wrap">
              <p>{{sub.company_name}}</p>
              <p :style="{background: `url('${$baseImgUrl}home/ws.png') no-repeat 12px center`}">
                已缴纳保证金
              </p>
              <el-row class="btn-wrap">
                <el-col :span="12">
                  <span>担保注册</span>
                </el-col>
                <el-col :span="12">
                  <span>担保入款</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </home-block>
</template>

<script>
import HomeBlock from './HomeBlock.vue';

export default {
  name: 'HomeWarrant',
  props: {
    records: {
      type: Array,
      default() {
        return [
          { number: 'q***e', money: '10000.00' },
          { number: 'w***e', money: '9999.00' },
          { number: 'e***e', money: '9988.00' },
          { number: 'r***e', money: '1012.00' },
          { number: 't***e', money: '2034.00' }
        ];
      }
    }
  },
  data() {
    return {
      warrantList: [],
      plat: {
        all: 0,
        is_guarantee: 0,
        certification: 0
      }
    };
  },
  computed: {
    recordList() {
      return this.records.slice();
    },
    warrant() {
      const COUNT = 4;
      const pieces = Math.ceil(this.warrantList.length / COUNT);
      const res = [];
      for (let i = 0; i < pieces; i += 1) {
        res.push(this.warrantList.slice(i * COUNT, (i + 1) * COUNT));
      }
      return res;
    }
  },
  created() {
    this.getData();
    this.runRecords();
    this.getPlatCount();
  },
  components: {
    HomeBlock
  },
  methods: {
    getData() {
      this.$api.getIndexCompany()
        .then(data => {
          this.warrantList = data;
        });
    },
    runRecords() {
      const DIATANCE = -26;
      const WAIT = 40;
      const unitDistance = 26 / 30;
      let wait = 0;
      const run = () => {
        if (this.distance <= DIATANCE) {
          if (wait >= WAIT) {
            wait = 0;
            this.distance = 0;
            this.recordList.push(this.recordList.shift());
          }
          wait += 1;
        } else {
          this.distance -= unitDistance;
        }
        requestAnimationFrame(run);
      };
      run();
    },
    getPlatCount() {
      this.$api.getCompanyStatic().then(data => {
        this.plat = data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .warrant {
    .btn-wrap {
      display: flex;
      a:first-child {
        margin-right: 5px;

      }
      img {
        border: 1px solid transparent;
        &:hover {
          border: 1px solid #199e9e;
        }
      }
    }
    .plat {
      margin-top: 10px;
      padding-left: 38px;
      p {
        line-height: 32px;
        font-size: 16px;
        a {
          padding: 0px 8px;
          font-size: 24px;
          color: #FD6600;
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    .record {
      margin: 5px 0;
      line-height: 30px;
      padding-left: 30px;
    }
    .list-wrap {
      height: 80px;
      overflow: hidden;
      .list {
        margin-top: 10px;
        li {
          margin: 0 0 10px 4px;
          padding-left: 24px;
          white-space: nowrap;
          span {
            color: #ff6600;
          }
        }
      }
    }
  }
  .warrant-list {
    .warrant-item {
      cursor: pointer;
      overflow: hidden;
      &:hover .btn-wrap {
        bottom: 0;
      }
      .big-img {
        width: 100%;
        height: 90px;
      }
    }
    .text-wrap {
      position: relative;
      margin-top: 3px;
      padding: 3px 0;
      text-align: center;
      background-color: #eee;
      font-size: 12px;
      color: #333;
      p {
        line-height: 18px;
        &:last-child {
          color: #888;
          background-size: 28px 24px;
        }
      }
      .btn-wrap {
        position: absolute;
        bottom: -40px;
        width: 100%;
        transition: bottom 0.2s ease;
        .el-col {
          display: block;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 14px;
          background-color: #30A893;
          color: #fff;
          &:last-child {
            background-color: #358DAF;
          }
          span:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
</style>
